<template>
  <div>
    <div style="position: relative; bottom: 0; left: 0; z-index: 1;">
      <div style="background-color: white; width: 20%;">
        <v-text-field style="width: 100%" v-model="city" placeholder="输入城市" label="城市名称" variant="solo-inverted"></v-text-field>
        <v-btn append-icon="$vuetify" variant="outlined" @click="fetchAttractions">
          获取景点
        </v-btn>
        <!-- 使用普通的列表展示 attractions 数据，只显示前 3 条 -->
        <ul>
          <li v-for="(item, index) in attractions.slice(0, 3)" :key="index">
            <h3>{{ item.title }}</h3>
            <p>{{ item.text }}</p>
            <p>{{ item.coordinates }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100vh; position: absolute; bottom: 0; left: 0; z-index: 0;"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { key_web_js, key_service } from '@/mapConfig';
import AMapLoader from '@amap/amap-jsapi-loader';
import  generateMarkerContent  from '../page/methodImpl.ts';


export default {
  name: 'CityAttractions',
  setup() {
    const city = ref(''); // 默认城市
    const attractions = ref([]);
    const map = ref(null); // 地图实例

    const fetchAttractions = async () => {
      try {
        const response = await axios.get(`http://8.149.246.32:8081/api/attractions?city=${city.value}`);

        // 解析景点数据并获取经纬度
        const attractionsList = []; // 用于存储景点数据

        for (const item of response.data.data) {
          const [name, address] = item.split(' - ');
          const trimmedAddress = address.trim();

          const coordinates = await getCoordinates(trimmedAddress); // 顺序获取经纬度
          attractionsList.push({
            title: name.trim(),
            text: trimmedAddress,
            coordinates: coordinates // 存储经纬度
          });

        }

        // 只取前三个景点  
    const topAttractions = attractionsList.slice(0, 3);

        // 将获取到的景点数据赋值给 attractions
        attractions.value = attractionsList;

        // 在地图上添加标记
        addMarkers(topAttractions);

      } catch (error) {
        console.error('获取景点失败:', error);
      }
    };

    // 使用高德地图 API 获取经纬度
    const getCoordinates = async (address) => {
      try {
        const response = await axios.get(`http://localhost:8081/api/getLocationByAddress?address=${encodeURIComponent(address)}`);
        if (response.data && response.data.code === 0) { // 检查返回的 code 是否为 0
          const { lng, lat } = response.data.data; // 直接解构获取经纬度
          return { lng: parseFloat(lng), lat: parseFloat(lat) }; // 返回经纬度对象
        } else {
          console.error('获取经纬度失败:', response.data.msg);
        }
      } catch (error) {
        console.error('获取经纬度失败:', error);
      }
      return null; // 如果失败，返回 null
    };

    const initMap = (lng, lat) => {  
      // 使用 AMapLoader 加载高德地图 API  
      AMapLoader.load({  
        key: key_web_js, // 替换为您的高德API密钥  
        version: '1.4.15', // 高德地图 API 版本  
        plugins: ['AMap.Marker', 'AMap.ToolBar', 'AMap.Scale'], // 可选插件  
      }).then((AMap) => {  
        // 创建地图实例并赋值给响应式引用  
        map.value = new AMap.Map('map', {  
          zoom: 10, // 设置地图缩放级别  
          center: [lng, lat], // 使用获取的经纬度作为中心点  
        });  

        // 创建工具条插件实例并添加到地图  
        const toolbar = new AMap.ToolBar();  
        map.value.addControl(toolbar);  

        // 创建比例尺插件实例并添加到地图  
        const scale = new AMap.Scale();  
        map.value.addControl(scale);  
      }).catch((error) => {  
        console.error('高德地图加载失败:', error);  
      });  
    };  

    // 添加标记到地图  
    const addMarkers = (attractionsList) => {  
      if (!map.value) return; // 确保地图实例已创建  

      attractionsList.forEach(attraction => {  
        if (attraction.coordinates) { 

          const marker = new AMap.Marker({  
            position: [attraction.coordinates.lng, attraction.coordinates.lat], // 设置标记位置 
            content: generateMarkerContent(attraction.name, attraction.note, attraction.img, attraction.type, 1),
          });  
          marker.setMap(map.value); // 将标记添加到地图  
        }  
      });  
    }; 

    // 组件挂载后初始化地图
    onMounted(() => {
      initMap(116.397428, 39.90923); // 默认中心点（北京的经纬度）
    });

    return {
      city,
      attractions,
      fetchAttractions
    };
  },
};
</script>

<style scoped>
/* 移除所有样式 */
</style>